@charset "utf-8";
/* header */
.header{height: 154px;}
.header-logo{position: absolute; left: 0; top: 24px;}
.header-logo img{display: block; height: 108px;}
.header-search{ position: absolute; top: 60px; right: 0; width:570px; height: 44px; border-radius: 22px; margin:0 auto; padding:0 66px 0 0; overflow: hidden; background: rgba(255, 255, 255, 0.58); box-sizing: border-box;}
.header-search-txt{width:100%; padding: 0 0 0 20px; height:44px; border: 0; background: none;}
.header-search-btn{ position:absolute; top: 0; right: 5px; width:61px; height:44px; border:0; cursor:pointer; background:url(../images/public/header_ss_icon.png) no-repeat center center; -webkit-appearance:none; transition: all .3s; -webkit-transition: all .3s;}
.header-search-btn:hover{filter:alpha(opacity=85); -moz-opacity: 0.85; opacity:0.85;}
.header-search-txt::-webkit-input-placeholder{color: #A6A6A6;}

.mainnav{position: relative; z-index: 9; height: 60px; background: #3156AD;}
.mainnav li{float: left; position: relative; width: 16.666667%;}
.mainnav li a{display:block; line-height: 60px; text-align:center; font-size: 0;}
.mainnav li span{position: relative; display: inline-block; font-size: 24px; color: #fff; opacity: .75; transition: .3s;}
.mainnav li a:before{content:''; width: 35px; height: 35px; margin-right: 8px; background-repeat: no-repeat; background-size: 100% 100%; transition: width .3s; margin-right: 10px;}
.mainnav li:hover span, .mainnav li.on span{color: #fff;}
.mainnav li:hover a span, .mainnav li.on a span{opacity: 1;}
.mainnav li.on a span{font-weight: bold;}
.mainnav li a:before, .mainnav li a span{display: inline-block; vertical-align: middle;}
.mainnav li.nav1 a:before{background-image: url(../images/public/mainnav_icon1.png);}
.mainnav li.nav2 a:before{background-image: url(../images/public/mainnav_icon2.png);}
.mainnav li.nav3 a:before{background-image: url(../images/public/mainnav_icon3.png);}
.mainnav li.nav4 a:before{background-image: url(../images/public/mainnav_icon4.png);}
.mainnav li.nav5 a:before{background-image: url(../images/public/mainnav_icon5.png);}
.mainnav li.nav6 a:before{background-image: url(../images/public/mainnav_icon6.png);}
.mainnav li:hover.nav1 a:before, .mainnav li.on.nav1 a:before{background-image: url(../images/public/mainnav_icon1_on.png);}
.mainnav li:hover.nav2 a:before, .mainnav li.on.nav2 a:before{background-image: url(../images/public/mainnav_icon2_on.png);}
.mainnav li:hover.nav3 a:before, .mainnav li.on.nav3 a:before{background-image: url(../images/public/mainnav_icon3_on.png);}
.mainnav li:hover.nav4 a:before, .mainnav li.on.nav4 a:before{background-image: url(../images/public/mainnav_icon4_on.png);}
.mainnav li:hover.nav5 a:before, .mainnav li.on.nav5 a:before{background-image: url(../images/public/mainnav_icon5_on.png);}
.mainnav li:hover.nav6 a:before, .mainnav li.on.nav6 a:before{background-image: url(../images/public/mainnav_icon6_on.png);}

/*responsive*/

@media (max-width: 1200px) {
	.header{height: auto; padding-bottom: 30px;}
	.header-logo{position: static; padding: 20px 0;}
	.header-logo img{margin: 0 auto; display: block; height: auto;}
	.header-search{position: relative; top: auto; right: auto;}
	.mainnav li a:before{display: none;}
	.mainnav li.nav1 a:before{display: inline-block;}
}


@media (max-width: 1023px) {
	
}

@media (max-width: 991px) {

}

@media (max-width: 860px) {

}


/* xs mobile*/
@media (max-width: 768px) {
	.mainnav .container{padding-left: 0; padding-right: 0;}
	.mainnav{padding:12px 0; height: auto;}
	.mainnav li{width: 33.333333%; position:relative;}
	.mainnav li:after{content:""; width:1px; height:16px; background:#fff; position:absolute; top:50%; margin-top:-8px; right:0; filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;}
	.mainnav li a{height: 30px; overflow: hidden; padding:4px 0; line-height:30px;}
	.mainnav li a span{font-size: 20px;}
	.mainnav li:nth-child(3):after, .mainnav li:nth-child(6):after{display:none;}
	.mainnav li:hover span:after, .mainnav li.on span:after{display: none;}
	.mainnav li.nav1 a:before{width: 26px; height: 26px;}
	/* .mainnav li.nav1{height:68px;} */
	/* .mainnav li.nav1 a{padding:0; line-height:68px;} */
}




@media (max-width: 640px) {
	.header-logo img{max-width: 90%;}
	.header-search{width: 100%;}
	
}


@media (max-width: 480px) {
	.mainnav li a span{font-size: 18px;}
	
}

@media (max-width: 414px) {


}

@media (max-width: 375px) {

	
}


@media (max-width: 320px) {

}